HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"]
HTML[/caption]
آشنایی با XHTML
به زبان ساده، XHTML همان HTML است که به صورت XML نوشته شده باشد.(ایران گستر)
XHTML مخفف EXtensible HyperText Markup Language و به معنی «زبان امتدادپذیر نشانهگذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.(ایران گستر)
چرا XHTML ؟
بسیاری از صفحات وب دارای HTML بد و غیر معتبر هستند. به طور مثال کد HTML زیر در تمام مرورگر ها کار می کند اما از نظر فنی غیر صحیح است:(ایران گستر)
|
<html>
<head>
<title>Thisisbad HTML</title>
<body>
<h1>Bad HTML
<p>Thisisaparagraph
</body>
|
به نظر شما مشکل کد بالا چیست؟
کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.(ایران گستر)
این کد HTML کاملا غیر معتبر و غیر صحیح است اما در اکثر مرورگر های وب بدون مشکل به نمایش در می آید چرا که خود مرورگر ها متوجه اشکالات می شوند و آن ها را در هنگام نمایش تصحیح می کنند. اما این مسئله برای مرورگر های تلفن های همراه اتفاق نمی افتد. معمولا گوشی های هوشمند آنقدر پیشرفته نشده اند که هر نوع خطایی را متوجه شوند و تصحیحش کنند. بنابراین علاوه بر ضربه خوردن از جهت سئو، ممکن است کاربران تلفن های هوشمند نتوانند سایت شما را ببینند و کاربران زیادی را از دست بدهید.(ایران گستر)
از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.(ایران گستر)
خصوصیات XHTML
برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:(ایران گستر)
- تعریف DOCTYPE در این زبان اجباری است
- تعریف attribute ای به نام xmlns در <html> اجباری است
- وجود داشتن تگ های <html> و <head> و <title> و <body> در یک سند اجباری است
- عناصر XHTML باید به صورت کاملا صحیح nest شوند (تو در تو قرار بگیرند)
- تمام عناصر XHTML باید همیشه بسته شوند (تگ پایانی)
- تمام عناصر XHTML باید با حروف کوچک نوشته شوند
- اسناد XHTML باید حتما یک عنصر root (ریشه ای) داشته باشند
- نام attribute ها باید همیشه با حروف کوچک نوشته شود
- مقدار attribute ها باید در Quotation قرار بگیرد
- خلاصه سازی attribute ها غیر مجاز است.
1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:(ایران گستر)
اگر به جای نوشتن <"option selected="selected>
بنویسید <option selected>
می گوییم attribute (در اینجا selected
) را خلاصه کرده اید.
می خواهیم این موارد را به صورت خلاصه بررسی کنیم.(ایران گستر)
اعلام DOCTYPE
یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.
یک نمونه سند صحیح به این شکل است:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content
</body>
</html>
|
DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.
تو در تو بودن (nesting)
در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:(ایران گستر)
|
<b><i>Thistext isbold anditalic</b></i>
|
در این کد تگ های پایانی جا به جا بسته شده اند.
اما در XHTML باید کاملا صحیح nest شوند:
|
<b><i>Thistext isbold anditalic</i></b>
|
تگ های پایانی
در HTML این کد غلط است:(ایران گستر)
|
<p>Thisisaparagraph
<p>Thisisanother paragraph
|
و این حالت صحیح است:(ایران گستر)
|
<p>Thisisaparagraph</p>
<p>Thisisanother paragraph</p>
|
حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:(ایران گستر)
|
Abreak:<br>
Ahorizontal rule:<hr>
An image:<img src="happy.gif"alt="Happy face">
|
اما در XHTML باید به این شکل نوشته شوند:
|
Abreak:<br/>
Ahorizontal rule:<hr/>
An image:<img src="happy.gif"alt="Happy face"/>
|
همچنین همیشه باید تگ هایتان با حروف کوچک باشند بنابراین کد زیر غلط است:(ایران گستر)
|
<BODY>
<P>Thisisaparagraph</P>
</BODY>
|
حالت صحیح این کد به این صورت است:(ایران گستر)
|
<body>
<p>Thisisaparagraph</p>
</body>
|
Attribute ها
کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:(ایران گستر)
و شکل صحیح آن بدین صورت است:
همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:(ایران گستر)
و شکل صحیح آن بدین صورت است:
خلاصه سازی attribute ها نیز غیر مجاز است. به نمونه های صحیح و غلط زیر نگاه کنید.(ایران گستر)
کد غلط:
|
<input type="checkbox"name="vehicle"value="car"checked/>
|
حالت صحیح آن:(ایران گستر)
|
<input type="checkbox"name="vehicle"value="car"checked="checked"/>
|
کد غلط:(ایران گستر)
|
<input type="text"name="lastname"disabled/>
|
حالت صحیح آن:(ایران گستر)
|
<input type="text"name="lastname"disabled="disabled"/>
|
سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟(ایران گستر)
پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.(ایران گستر)
یک مثال از یک سند XHTML برای شما آورده ام:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?xml version="1.0"encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<title>Strict DTD XHTML Example</title>
</head>
<body>
<p>
Please ChooseaDay:
<br/><br/>
<select name="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select>
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با نگاهی به این سند کوتاه متوجه می شوید که تمام موارد بالا در آن رعایت شده است.(ایران گستر)
:: بازدید از این مطلب : 21
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0